上一篇文章我們定義好資料的儲存結構：

{
  title: '專案標題',
  boards: {
    ids: ['board1', 'board2'],
    byId: {
      board1: {
        name: '看板一',
        cardIds: ['card1', 'card2']
      },
      board2: {
        name: '看板二',
        cardIds: ['card3', 'card4']
      }
    }
  },
  cards: {
    byId: {
      card1: '卡片一',
      card2: '卡片二',
      card3: '卡片三',
      card4: '卡片四',
    }
  }
}

接著要來定義各種更新資料的 action。

action

使用 useReducer 會回傳一個 dispatch 函式，呼叫 dispatch 函式可以傳入一個 action 物件，這個物件會有一個 type 屬性，也就是更新資料的類型，用來決定如何更新資料，所以 action 大致上會長這樣：

{
  type: '更新資料的類型',
  payload: {
    // 更新時需要的額外資料
  }
}

先來看看有哪些會更新到資料的網頁功能：

• 標題
  • 修改標題
• 看板
  • 新增看板
  • 修改看板名稱
  • 刪除看板
  • 移動看板
• 卡片
  • 新增卡片
  • 修改卡片內容
  • 刪除卡片
  • 移動卡片

標題

修改標題

修改標題需要新標題的文字，所以 action 會是：

{
  type: 'CHANGE_TITLE',
  payload: {
    title: '新標題'
  }
}

看板

新增看板

新增看板一樣需要新看板的名稱，action：

{
  type: 'ADD_BOARD',
  payload: {
    boardName: '新看板名稱'
  }
}

修改看板名稱

修改看板名稱除了需要新的看板名稱之外，還要知道被修改的看板 id：

{
  type: 'CHANGE_BOARD_NAME',
  payload: {
    boardName: '新看板名稱',
    boardId: 'board1'
  }
}

刪除看板

刪除看板只需要知道被刪除的看板 id：

{
  type: 'REMOVE_BOARD',
  payload: {
    boardId: 'board1'
  }
}

移動看板

移動看板則是要知道被移動的看板 id，還有移到哪一個位置(index)：

{
  type: 'ADD_CARD',
  payload: {
    draggingBoardId: 'board1',
    targetBoardIndex: 2
  }
}

卡片

新增卡片

新增卡片和新增看板一樣需要新卡片的內容，而且還要知道新增卡片到哪一個看板的 id：

{
  type: 'ADD_CARD',
  payload: {
    cardValue: '卡片1'
    boardId: 'board1'
  }
}

修改卡片內容

修改卡片內容類似修改看板名稱，除了需要新的卡片內容之外，還要知道被修改的卡片 id：

{
  type: 'CHANGE_CARD_NAME',
  payload: {
    cardValue: '新卡片內容',
    cardId: 'card1'
  }
}

刪除卡片

刪除卡片只需要知道被刪除的卡片 id：

{
  type: 'REMOVE_CARD',
  payload: {
    draggingCardId: 'card1'
  }
}

移動卡片

移動卡片要知道被移動的卡片 id，還有移到哪一個看板中的哪一個位置：

{
  type: 'MOVE_CARD',
  payload: {
    draggingCardId: 'card1',
    targetBoardId: 3,
    targetCardIndex: 0
  }
}

下集預告

定義資料更新的邏輯 - reducer